<template>
    <!--个人资料-->
    <div class="contain">
        <div class="title">地址管理</div>
        <div class="content">
            <ul class="address-box">
                <li class="address" v-for="address in addressList" :key="address.id">
                    <span class="default-tag" v-if="address.is_default&&address.is_default!=='false'">默认地址</span>
                    <div class="form">
                        <span class="label">姓名</span>
                        <span class="value">{{address.consignee}}</span>
                    </div>
                    <div class="form">
                        <span class="label">联系方式</span>
                        <span class="value">{{address.mobile}}</span>
                    </div>
                    <div class="form">
                        <span class="label">收货地址</span>
                        <span class="value">{{address.province}} {{address.city}} {{address.xianqu}} {{address.address}}</span>
                    </div>
                    <div class="option">
                        <div class="option-btn" @click="handleEditAddress(address)">修改</div>
                        <div class="option-btn" @click="handleDelAddress(address)">删除</div>
                    </div>
                </li>
                <li class="add-box" @click="handleAddAddress">
                    <span>+ 新增地址</span>
                </li>
            </ul>
        </div>
        <div class="component-box">
            <addressAdd v-if="editStatus" :address="editAddress" @submit="addFormStatus()"></addressAdd>
        </div>
        <!--删除框-->
        <a-modal
            title="提示"
            :visible="visible"
            @ok="handleDelOk"
            @cancel="handleDelCancel"
        >是否确认删除该项</a-modal>
    </div>
</template>
<script>
    import addressAdd from '../comp/addressAdd.vue';
export default {
    name: 'addressMsg',
    components: {
        addressAdd
    },
    data() {
        return {
            addressList: [],
            visible: false,
            editStatus: false,
            editAddress: null
        };
    },
    watch: {
        /**/
    },
    mounted() {
        if(!this.$util.authLogin()) {
            location.replace('/login');
        } else {

            this.initAddressList();
        }
    },
    methods: {
        // 获取地址列表
        initAddressList() {
            this.$api.ajaxData({
                pathName: 'doGetAddress',
                authorization: true,
            }).then(res =>{
                this.addressList = res.obj;
            });
        },
        handleAddAddress() {
            this.editStatus = true;
            this.editAddress = null;
        },
        // 新增
        addFormStatus(){
            this.editStatus = false;
            this.initAddressList()
        },
        // 删除
        handleDelAddress(item) {
            this.visible = true;
            this.editAddress = item;
        },
        // 编辑
        handleEditAddress(item) {
            this.editStatus = true;
            this.editAddress = Object.assign({},item);
        },
        //确定删除
        handleDelOk() {
            this.$api.ajaxData({
                pathName: 'doDelAddress',
                authorization: true,
                params: {
                    addid: this.editAddress.id
                }
            }).then(() =>{
                this.visible = false;
                this.editAddress = null;
                this.initAddressList()
            });
        },
        handleDelCancel() {
            this.visible = false;
            this.editAddress = null;
        }
    }
};
</script>
<style scoped lang="scss">
.contain {
    border: 1px solid #f7f7f7;
    background: #fff;
    .title {
        height: 50px;
        margin: 0 20px;
        line-height: 50px;
        font-size: 14px;
        font-weight: bold;
        color: #333;
        border-bottom: 1px solid #f7f7f7;
    }
    .content {
        padding: 40px 0 20px 20px;
        .address-box {
            li {
                position: relative;
                float: left;
                width: calc(33.33% - 20px);
                padding: 15px 10px;
                margin-bottom: 20px;
                margin-right: 20px;
                height: 180px;
                font-size: 13px;
                color: #333333;
                border: 1px solid #e4e4e4;
                box-sizing: border-box;
                &.address {
                    .default-tag {
                        position: absolute;
                        top: 3px;
                        right: 0;
                        height: 30px;
                        line-height: 30px;
                        padding: 0 20px;
                        border-radius: 2px;
                        font-size: 12px;
                        color: #FFFFFF;
                        background: #ff8080;
                    }
                    .form {
                        display: flex;
                        align-items: flex-start;
                        margin-bottom: 10px;
                        &:nth-child(4) {
                            height: 40px;
                        }
                        .label {
                            flex-shrink: 0;
                            width: 70px;
                        }
                        .value {
                            @include ellipsis-line;
                        }
                    }
                    .option {
                        .option-btn {
                            float: left;
                            width: 70px;
                            height: 30px;
                            line-height: 30px;
                            margin-right: 10px;
                            color: #999;
                            border: 1px solid #e4e4e4;
                            border-radius: 3px;
                            text-align: center;
                            cursor: pointer;
                        }
                        &:after {
                            content: '';
                            display: block;
                            clear: both;
                        }
                    }
                    &:before {
                        content: '';
                        position: absolute;
                        top: 0;
                        left: 0;
                        display: block;
                        width: 100%;
                        height: 3px;
                        background: linear-gradient(to right, #ff8080 0,#ff8080 30px,#fff 30px,#fff 40px,#6699ff 40px, #6699ff 70px,#fff 70px,#fff 80px) repeat-x;
                        background-size: 80px 100%;
                    }
                    &:after {
                        content: '';
                        position: absolute;
                        bottom: 0;
                        left: 0;
                        display: block;
                        width: 100%;
                        height: 3px;
                        background: linear-gradient(to right, #ff8080 0,#ff8080 30px,#fff 30px,#fff 40px,#6699ff 40px, #6699ff 70px,#fff 70px,#fff 80px) repeat-x;
                        background-size: 80px 100%;
                    }
                }
                &.add-box {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    border: 1px dashed #e4e4e4;
                    text-align: center;
                    cursor: pointer;
                    span {
                        font-size: 20px;
                        color: #666666;
                        line-height: 28px;
                    }
                }
                &:nth-child(3n) {
                    margin-right: 0;
                }
            }

        }&:after {
             content: '';
             display: block;
             clear: both;
         }
    }
}
</style>
